<template>
  <view style="position: relative;height: 100vh;">
    <MyNavbar :loginData="loginData"/>
    <view style="padding: 0 30rpx;">
      <view class="flex" style="margin-bottom: 40rpx;margin-top:20rpx">
        <view v-for="item in tabList" :key="item.text" class="tabIconStyle" @click="this.type = item.value">
          <text :style="{fontWeight:item.value == type?'bold':'',fontSize:item.value ==type?'36rpx':'32rpx'}">
            {{ item.text }}
          </text>
          <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/activeBot.svg" v-if="item.value == type" class="activeIcon"/>
        </view>
      </view>
      <view class="flex justify-center" style="flex-wrap: wrap;">
        <view v-for="(item, i) in comList" class="flex flex-column item-center comItemStyle" :key="item.title"
              @click="comClick(item)"
              :style="{ background: item.bgColor, marginBottom: '28rpx', marginRight: i % 2 == 0 ? '28rpx' : '', fontWeight:'bold'}"
        >
          <view :style="{ color: item.color }" style="font-size: 32rpx;margin-top: 20rpx;font-weight:bold">{{
              item.title
            }}
          </view>
          <view class="flex"
                style="align-items: center; font-size: 24rpx; color: #666;line-height: 52rpx;margin-top: 10rpx">
            <text style="color:#666">{{ item.oneT }}</text>
            <div class="lineStyle"></div>
            <text style="color:#666">{{ item.twoT }}</text>
          </view>
          <image :src="item.icon" style="width: 160rpx;height: 160rpx; margin-top: 30rpx"/>
        </view>
      </view>
    </view>
    <view class="bottomBtn" :style="{bottom:66 + safeAreaInsets.bottom +20+ 'px'}" @click="historyClick">
      <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/addCreate.svg" style="width: 36rpx;height: 36rpx; margin-right: 22rpx;"/>
      <text>{{ type === 1 ? '历次练习' : '历次创建' }}</text>
    </view>
    <NoOpenPopup :isPopup="isPopup" @close="isPopup=false"/>
    <MTabBar :value="2"/>
  </view>
</template>

<script>
import NoOpenPopup from "../../components/NoOpenPopup/NoOpenPopup.vue";

export default {
  components: {NoOpenPopup},
  data() {
    return {
      type: 1,
      tabList: [{text: "参加", value: 1}, {text: "发布", value: 2}],
      comList: [
        {
          title: "每日一练",
          bgColor: "#F6FFF7",
          icon: 'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/mryl.png',
          oneT: "每日抽题",
          twoT: "每日练习",
          color: "#37B874",
          // publishPath: "/improve/dailyPractice?practiceType=1",
          publishPath: "/improve/publish/addPractice?practiceType=1",
          joinPath: "/improve/join/practiceList?practiceType=1"
        },
        {
          title: "在线练测",
          bgColor: "#f0faf2",
          icon: "https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/zxlc.png",
          oneT: "随机抽题",
          twoT: "随时练习",
          color: "#00AC26",
          publishPath: "/improve/publish/addPractice?practiceType=2",
          joinPath: "/improve/join/practiceList?practiceType=2"
        },
        {
          title: "知识竞赛",
          bgColor: "#fff9f0",
          icon: "https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/zsjs.png",
          oneT: "智慧竞赛",
          twoT: "能力闯关",
          color: "#FF9D00",
          publishPath: "/improve/publish/addPractice?practiceType=3",
          joinPath: "/improve/join/practiceList?practiceType=3"
        },
        {
          title: "有奖答题",
          bgColor: "#f2fbfb",
          icon: "https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/yjdt.png",
          oneT: "趣味答题",
          twoT: "激励获奖",
          color: "#1ABAB1",
          publishPath: "/improve/publish/addPractice?practiceType=4",
          joinPath: "/improve/join/practiceList?practiceType=4"
        },
      ],
      safeAreaInsets: {},
      loginData: {},
      isPopup: false,
      session: null
    }
  },
  computed: {},
  methods: {
    comClick(item) {
      uni.navigateTo({
        url: this.type === 2 ? item.publishPath : item.joinPath
      })
    },
    historyClick() {
      if (this.type === 1) {
        uni.navigateTo({
          url: "/improve/join/practiceList?isHistory=true"
        })
      } else {
        uni.navigateTo({
          url: "/improve/publish/historicalCreation"
        })
      }
    },
  },
  beforeMount() {
    uni.getSystemInfo({
      success: (res) => {
        this.safeAreaInsets = res.safeAreaInsets
      }
    })
  },
  onShow() {
    if (uni.getStorageSync('appKey')) {
      this.loginData = {
        ...uni.getStorageSync('loginData'),
      };
    } else {
      this.loginData = {};
    }
  }
}
</script>

<style lang="scss">
page {
  background: #ffffff !important;
}

.tabIconStyle {
  color: #666;
  font-size: 32rpx;
  position: relative;
  margin-right: 46rpx;

  .active {
    font-size: 36rpx;
    font-weight: 500;
  }

  .activeIcon {
    width: 72rpx;
    height: 50rpx;
    position: absolute;
    top: 24rpx;
    left: 0;
  }
}

.comItemStyle {
  width: 330rpx;
  height: 360rpx;
  padding: 27rpx;
  box-sizing: border-box;
  border-radius: 24rpx;
}

.lineStyle {
  width: 2rpx;
  height: 16rpx;
  background-color: #666666;
  margin: 0 15rpx;
}

.bottomBtn {
  width: calc(100% - 60rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90rpx;
  box-shadow: 0px 1px 8px 0px #00000014;
  border-radius: 24rpx;
  position: absolute;
  bottom: 160rpx;
  left: 30rpx;
  bottom: 160rpx;
  color: #37B874;
}
</style>